<template>
  <el-dialog
    v-model="open" title="选择会员" width="800px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="mb20">
      <el-input v-model="queryParams.queryVip" placeholder="会员姓名/手机号/卡号" clearable @keyup.enter="handleQuery">
        <template #append>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </template>
      </el-input>
    </div>
    <!-- 单选会员 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column type="index" />
      <el-table-column label="会员" min-width="120">
        <template #default="scope">
          <span>{{ scope.row.memberName }}</span>
          <p>{{ scope.row.memberTelno }}</p>
        </template>
      </el-table-column>
      <el-table-column label="会员卡号" prop="cardCode" min-width="120" />
      <el-table-column label="卡片等级" prop="cardTypeStr" min-width="120" />
      <el-table-column label="账户余额" prop="balance" min-width="120" />
      <el-table-column label="折扣" min-width="120">
        <template #default="scope">
          <span>{{ scope.row.discountPercent }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="过期时间" prop="expirationTime" min-width="120" />
      <el-table-column label="操作" align="center" fixed="right" width="100" class-name="small-padding">
        <template #default="scope">
          <el-button type="text" @click="choseRow(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script setup>
import { computed } from '@vue/reactivity'
import { reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { getMemberList } from '../../../../../../api/ven/member'
import { watch } from 'vue'


const emit = defineEmits(['update:modelValue', 'chooseMember'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const open = computed({
  get: () => props.modelValue,
  set: () => { }
})


const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: '1',
    queryVip: undefined
  },
  loading: false,
  tableData: [],
  total: 0
})
const { queryParams, loading, tableData, total } = toRefs(data)

watch(open, (val) => {
  if (val) {
    queryParams.value.queryVip = ''
    handleQuery()
  } 
})

function getList() {
  loading.value = true
  getMemberList(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function choseRow(row) {
  emit('chooseMember', row)
  emit('update:modelValue', false)
}

function cancel() {
  emit('update:modelValue', false)
}

</script>

<style scoped>

</style>
